import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:starfish_tenement_app/route/route_utils.dart';

import '../../../component/app_bar/app_title_bar.dart';
import '../../../component/styles/app_colors.dart';
import '../../../utils/string_utils.dart';

///咨询明细页
class NewsDetailPage extends StatefulWidget {
  const NewsDetailPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _NewsDetailPageState();
  }
}

class _NewsDetailPageState extends State<NewsDetailPage> {
  final List<String> bannerImages = [
    'https://img95.699pic.com/photo/60032/3444.jpg_wh860.jpg',
    'https://img95.699pic.com/photo/60032/3444.jpg_wh860.jpg',
    'https://img95.699pic.com/photo/60032/3444.jpg_wh860.jpg',
  ];

  final List<Comment> comments = [
    Comment(user: '用户1', content: '这个内容太棒了！'),
    Comment(
        user: '用户2',
        content: '很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，学习到了。'),
    Comment(user: '用户3', content: '很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，学习到了。'),
    Comment(
        user: '用户4',
        content:
            '很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，很有启发性，学习到了。'),
    Comment(user: '用户5', content: '很有启发性，学习到了。'),
    Comment(user: '用户6', content: '很有启发性，学习到了。'),
    Comment(user: '用户7', content: '很有启发性，学习到了。'),
    Comment(user: '用户8', content: '很有启发性，学习到了。'),
    Comment(user: '用户9', content: '很有启发性，学习到了。'),
    Comment(user: '用户10', content: '支持一下～'),
  ];

  final TextEditingController _commentController = TextEditingController();
  late SwiperController swiperController = SwiperController();

  void _submitComment() {
    if (_commentController.text.trim().isNotEmpty) {
      setState(() {
        comments.insert(
            0, Comment(user: '我', content: _commentController.text));
        _commentController.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          // 顶部导航栏
          AppTitleBar(
            title: "咨询详情",
            onBackTap: () {
              RouteUtils.pop(context);
            },
          ),

          // 正文内容
          Expanded(
            child: ListView(
              padding: EdgeInsets.only(top: 16.h, bottom: 16.h),
              children: [
                // Banner 轮播图
                _newsImagesBannerView(),

                // 正文
                _newsContentView(),

                // 评论列表标题
                _newsCommentsView(),
              ],
            ),
          ),
        ],
      ),
      // 底部评论输入栏
      bottomNavigationBar: Container(
        height: 60.h,
        padding: EdgeInsets.only(top: 10.h, bottom: 10.h, left: 10.w),
        color: Colors.white70,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              child: TextField(
                controller: _commentController,
                decoration: InputDecoration(
                  hintText: '写下你的评论...',
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5.r)),
                  ),
                ),
              ),
            ),
            SizedBox(width: 10.w),
            IconButton(
              icon: const Icon(Icons.send),
              onPressed: _submitComment,
            )
          ],
        ),
      ),
    ));
  }

  Widget _newsImagesBannerView() {
    return SizedBox(
      height: 325.h,
      width: double.infinity,
      child: Swiper(
        loop: false,
        pagination: _pagination(),
        layout: SwiperLayout.DEFAULT,
        itemBuilder: (context, index) {
          return ClipRRect(
              child: Image.network(
            StringUtils.takeStrForList(bannerImages),
            fit: BoxFit.fill,
          ));
        },
        itemCount: bannerImages.length,
      ),
    );
  }

  SwiperPagination _pagination() {
    //自定义分页样式
    return SwiperPagination(
        alignment: Alignment.bottomRight,
        builder: SwiperCustomPagination(builder: (context, config) {
          var index = config.activeIndex + 1;
          var total = bannerImages.length;
          return Container(
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  SizedBox(width: 5.h),
                  Text(
                    "$index/$total",
                    style: TextStyle(color: Colors.white),
                  ),
                  SizedBox(width: 5.h),
                ],
              ));
        }));
  }

  Widget _newsContentView() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        SizedBox(height: 20.h),
        //用户信息栏
        _newsOwnerBar(),

        SizedBox(height: 10.h),
        _newsContent(),

        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(width: 20.w),
            Text("2025-05-30 北京",
                style: TextStyle(fontSize: 11.sp, color: Colors.grey))
          ],
        )
      ],
    );
  }

  Widget _newsOwnerBar() {
    return Row(mainAxisAlignment: MainAxisAlignment.start, children: [
      SizedBox(width: 20.w),
      ClipOval(
          child: Image.asset("assets/images/icon_mine_bg_01.png",
              width: 30.h, height: 30.h, fit: BoxFit.fill)),
      SizedBox(width: 5.w),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "不吃香菜",
            style: TextStyle(fontSize: 12.sp, color: AppColors.textColorB7),
          ),
          Text(
            "超级无敌风火轮",
            style: TextStyle(fontSize: 12.sp, color: AppColors.textColorB7),
          )
        ],
      ),
    ]);
  }

  Widget _newsContent() {
    return Container(
      margin: EdgeInsets.all(20.h),
      child: Text(
        "这里是文章正文内容，可以是多行文本。你可以在这里写一些介绍或详细信息。"
        "例如：这是一个图文详情页面的示例，展示了如何构建 Flutter 应用中的常见 UI 组件。",
        style: TextStyle(fontSize: 15.sp),
      ),
    );
  }

  Widget _newsCommentsView() {
    return Column(
      children: [
        SizedBox(height: 20.h),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(width: 20.h),
            Text("全部评论 56",
                style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold))
          ],
        ),

        const Divider(),

        // 评论项
        if (comments.isEmpty) const Text("暂无评论"),
        for (var comment in comments) _commentCardItem(comment)
      ],
    );
  }

  Widget _commentCardItem(comment) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        //用户标题
        _newsOwnerBar(),
        //回复正文
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(width: 50.h),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(top: 10.w, bottom: 10.w),
                padding: EdgeInsets.zero,
                child: Text(
                  comment.content,
                  style: TextStyle(fontSize: 14.sp),
                ),
              ),
            )
          ],
        ),
        //发布时间及ip
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(width: 50.w),
            Text("2025-05-30 北京",
                style: TextStyle(fontSize: 11.sp, color: Colors.grey))
          ],
        ),
        SizedBox(height: 20.h),
      ],
    );
  }
}

// 评论模型类
class Comment {
  final String user;
  final String content;

  Comment({required this.user, required this.content});
}
